<template>
    <div class="container">

        <div class="body_wrap">



            <el-card shadow="hover" ref="content_card">

                <el-alert
                    title="代码生成器"
                    type="success"
                    description="可在线生成entity、xml、dao、service、vue、html、js、sql代码，减少70%以上的开发任务，让你更专注业务开发。"
                    show-icon
                    :closable="false"
                    style="margin-bottom: 10px;">
                </el-alert>

                <!-- 搜索 -->
                <el-form ref="queryParams" :inline="true" :model="queryParams" size="medium" label-width="120px">
                    <div class="search_wrap">
                        <!-- 多条件 -->
                        <div class="search_more">
                            <el-form-item label="" prop="keyword">
                                <el-select v-model="queryParams.database" @change="changeDatabase" placeholder="数据库" >
                                    <el-option
                                            v-for="item in databases"
                                            :key="item.SCHEMA_NAME"
                                            :label="item.SCHEMA_NAME"
                                            :value="item.SCHEMA_NAME"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>



                        </div>

                    </div>

                    <!-- 工具栏 -->
                    <div class="tools_wrap">
                        <div class="action_bar_wrap">
                            <el-form-item prop="tableName">
                                <el-input placeholder="表" v-model="queryParams.tableName" clearable size="medium"></el-input>
                            </el-form-item>

                            <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="medium" style="margin-right: 10px;">搜索</el-button>
                            <el-form-item>
                                <el-input v-model="form.packageName" placeholder="自定义包名：com.mars" clearable size="medium"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="form.moduleName" placeholder="自定义模块名：system" clearable size="medium"></el-input>
                            </el-form-item>
                            <el-button type="primary" icon="el-icon-finished" disabled @click="handleGeneratorCode" size="medium">生成代码</el-button>
                            <el-button @click="$refs.table.clearSelection()" type="info" plain size="medium">清空选中</el-button>
                        </div>
                    </div>
                </el-form>

                <!-- 表格 -->
                <el-table
                    ref="table"
                    size="medium"
                    height="500"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    :stripe="stripe"
                    v-loading="loadingData"
                    :data="dataList"
                    :row-key="getRowKey"
                    @selection-change="handleSelection">

                    <el-table-column
                                type="selection"
                                width="55"
                                prop="selection"
                                :reserve-selection="true"
                                align="center" />
                    <el-table-column label="序号" type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center" />

                    <el-table-column label="表名" prop="tableName" v-if="isHideColumn('tableName')" show-overflow-tooltip></el-table-column>
                    <el-table-column label="数据库引擎" prop="ENGINE" v-if="isHideColumn('ENGINE')" show-overflow-tooltip></el-table-column>
                    <el-table-column label="表备注" prop="tableComment" v-if="isHideColumn('tableComment')" show-overflow-tooltip></el-table-column>
                    <el-table-column label="时间" prop="createTime" v-if="isHideColumn('createTime')" show-overflow-tooltip></el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryParams.page"
                            :page-sizes="[10, 20, 30, 50, 100, 200]"
                            :page-size="queryParams.limit"
                            :total="queryParams.total"
                            layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </el-card>

        </div>
    </div>
</template>

<script>
import TableMixin from '@/mixin/TableMixin'
export default {
    mixins: [TableMixin],
    data() {
        return {
            dataList: [],
            loadingData: false,
            addOrUpdateVisible: false,
            drawerVisible: false,
            selectionRows: [],
            searchFlag: true,
            queryParams: {
                sortColumns: 'table_name',
                sortType: 'ASC',
                database: null,
                tableName: null
            },

            form: {
                database: null,
                packageName: 'com.quan',
                moduleName: null,
                tables: null
            },

            databases: []
        }
    },

    created() {

    },

    mounted() {
        this.$nextTick(() => {
            this.getDataBaseList()
        })
    },

    methods: {
        /**
         * 侧边栏抽屉打开
         */
        handleDrawerVisible(row) {
            this.drawerVisible = true
        },
        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        },
        /**
         * 重置搜索表单
         */
        handleReset() {
            this.$refs.queryParams.resetFields()
        },
        /**
         * 搜索
         */
        handleSearch() {
            this.getDataList()
        },

        changeDatabase(value) {
            this.queryParams.database = value
            this.form.database = value
            this.getDataList()
        },

        /**
         * 下载生成代码数据
         */
        async handleGeneratorCode() {
            let tables = []
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    tables.push(item.tableName)
                })
            }
            if(tables.length > 0) {
                this.submitLoading = true
                this.form = Object.assign(this.form, {tables})

                const data = await this.$http({
                    url: '/generator/code',
                    method: 'POST',
                    responseType: 'blob',
                    data: this.form,
                }).catch(err => {console.log(err)})

                if (!data) { return }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', data.filename);

                document.body.appendChild(link);
                link.click()
            } else {
                this.$notify({ title: '提示', message: '请选择要生成的表', type: 'info' });
            }
        },

        /**
         * 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
         * @param {*} row
         */
        getRowKey(row) {
            return row.tableName
        },


        // 获取所有数据库
        getDataBaseList() {
            this.$http({
                url: '/generator/database',
                method: 'get',
                params: this.queryParams
            }).then(res => {
                this.databases = res.data

                this.queryParams.database = this.databases[0].SCHEMA_NAME
                this.form.database = this.databases[0].SCHEMA_NAME

                this.getDataList()
            }).catch(function (err) {
                console.log(err);
            });
        },



        // 加载列表数据
        getDataList() {
            this.loading = true
            this.$http({
                url: '/generator/tables',
                method: 'get',
                params: this.queryParams
            }).then(res => {
                this.dataList = res.data.records
                this.queryParams.total = res.data.total
                this.loading = false
            })
        }
    }

}
</script>

<style lang="scss" scoped>

</style>
